import { createMemo, splitProps, type ParentComponent } from "solid-js";
import type { InputGroupProps, InputGroupTextProps } from "./types";
import { wrapClasses } from "@lib/types";
import type { JSX } from "solid-js/jsx-runtime";

const FcInputGroupBase: ParentComponent<InputGroupProps> = (props) => {
  const [local, elProps] = splitProps(props, [
    "classList",
    "ref",
    "$ServerOnly",
    "children",
    "noWrap",
    "controlSize",
  ]);

  const classList = createMemo(() => {
    return {
      ...wrapClasses(local.classList),
      "flex-nowrap": local.noWrap,
      [`input-group-${local.controlSize}`]: local.controlSize !== undefined,
    };
  });

  return (
    <div
      ref={local.ref}
      class="input-group"
      {...elProps}
      classList={classList()}
    >
      {local.children}
    </div>
  );
};

export const FcInputGroupText: ParentComponent<InputGroupTextProps> = (
  props
) => {
  const [local, elProps] = splitProps(props, [
    "classList",
    "ref",
    "$ServerOnly",
    "children",
  ]);

  const classList = createMemo(() => wrapClasses(local.classList));
  return (
    <span
      ref={local.ref}
      class="input-group-text"
      {...elProps}
      classList={classList()}
    >
      {local.children}
    </span>
  );
};

export type FcInputGroupType = typeof FcInputGroupBase & {
  Text: typeof FcInputGroupText;
};

const FcInputGroup = FcInputGroupBase as FcInputGroupType;
FcInputGroup.Text = FcInputGroupText;

export default FcInputGroup;
